<template>
    <div class="bg_color" v-bind:class="{'fix':rule_showable_flag}">
        <div v-if="data.payType==3 || data.payType==2" v-html="data.payParam.ali_info"></div>
        <div class="big_div" v-bind:class="{'fix':rule_showable_flag}"
             style="display: block;bottom: 0;left:0;right:0;top:0;">
            <div class="panel" v-if="prod_info.length>0">
                <div class="timer">
                    <div class="one_noborder ub">
                        <div class="left">
                            <span class="left_time">剩余支付时间</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span> <img style="width: 0.15rem;height: 0.15rem" src="static/image/hotel/clock.png"
                                        alt=""></span>
                            <span style="margin-left: 0.05rem" class="stop_watch">{{rest_time}}</span>
                        </div>
                    </div>
                    <div class="one_noborder ub">
                        <div class="left attention">超时订单自动取消，请尽快支付</div>
                    </div>
                </div>
                <div v-if="category_id==3" class="top_info fix" style="margin-bottom: 0.7rem;">

                    <div class="hotel_info" v-for="item in prod_info">
                        <div class="one_noborder ub">
                            <div class="left hotel_name">{{item.hotel_name}}</div>
                        </div>
                        <div class="one_noborder ub">
                            <div class="left hotel_left">{{item.room_name}}</div>
                        </div>
                        <div class="one_noborder ub">
                            <div class="left hotel_left">
                                入住 <span class="hotel_left">{{item.start_date}}</span>
                                离店 <span class="hotel_left">{{item.end_date}}</span>
                                <span class="hotel_left">{{item.day_cnt}}</span>晚
                            </div>
                        </div>
                        <div class="one_noborder ub ub-ver">
                            <div class="left hotel_left" v-if="item.prod_cnt==1">
                                入住人 <span class="hotel_left">{{contact_name}}</span>
                            </div>
                            <div class="left hotel_left" v-if="item.prod_cnt>1">
                                入住人 <span class="hotel_left">{{contact_name}}</span>&emsp;等
                            </div>
                            <div class="left" style="margin-left:0.51rem;">
                                <span class="hotel_left">{{contact_phone}}</span>
                            </div>
                        </div>
                        <div style="width: 750px;height: 1px;background-color: #cccccc;"></div>
                        <div class="one_noborder ub" v-if="item.gift_describe.length!==0"
                             style="padding-top:0.145rem;padding-bottom:0.145rem;">
                            <div class="left">
                                <span
                                    style="border: 1px solid orange;color:orange;width: 0.1rem;height: 0.14rem">礼</span>
                                <div style="margin-left: 0.1rem;float: right;width: 3.125rem;">
                                    <div class="ub gift-item" v-for="val in item.gift_describe">{{val.date}}&emsp;{{val.name}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-else class="top_info" style="margin-bottom: 0.7rem;">
                    <div class="go" v-for="(item,index) in prod_info">
                        <div class="one ub" style="margin-bottom: 0.09rem;">
                            <div class="left ub ub-ac"
                                 style="background-image: url('static/image/home/dingdan.png');background-size:0.12rem 0.14rem;background-repeat: no-repeat;background-position-y: 0.01rem;"></div>
                            <div class="right ub-f1">{{item.pro_cate_name}}</div>
                        </div>
                        <div v-show="item.category_id==1||item.category_id==5 || (item.category_id==2 && item.sub_type==3)" class="one_noborder ub">
                            <div class="left">上车站点</div>
                            <div class="right_txt ub-f1">{{item.start_area}}</div>
                        </div>
                        <div v-show="item.category_id==1||item.category_id==5 ||  (item.category_id==2 && item.sub_type==3)" class="one_noborder ub">
                            <div class="left">下车站点</div>
                            <div class="right_txt ub-f1">{{item.end_area}}</div>
                        </div>
                        <div class="one_noborder ub">
                            <div class="left">购买数量</div>
                            <div class="ub ub-ver">
                                <!--<div class="right_txt ub-f1" style="padding-top: 0.09rem;">成人票 X 1</div>
                                <div class="right_txt ub-f1" style="padding-top: 0.09rem;">成人票 X 1</div>-->
                                <div v-if="item.prod_array.length==0" class="right_txt ub-f1">{{item.prod_cnt}}人</div>
                                <div v-else v-for="val in item.prod_array" class="right_txt ub-f1">{{val.prod_name}} X
                                    {{val.count}}
                                </div>
<!--                                <div class="right_txt ub-f1">保险 X {{item.insurance_cnt}}</div>-->
                            </div>
                        </div>
                        <div v-if="item.category_id==2 && item.sub_type==3" class="one_noborder ub">
                            <div class="left">用车开始时间</div>
                            <div class="right_txt ub-f1">{{item.start_date}}</div>
                        </div>
                        <div v-if="item.category_id==2 && item.sub_type==3 && item.start_date!=item.end_date" class="one_noborder ub">
                            <div class="left">用车结束时间</div>
                            <div class="right_txt ub-f1">{{item.end_date}}</div>
                        </div>
                        <div v-else class="one_noborder ub">
                            <div class="left">游玩日期</div>
                            <div class="right_txt ub-f1">{{item.start_date}}</div>
                        </div>

                        <div v-if="item.poi_id != '' && item.category_id==2" class="one" style="display: flex">
                            <div class="buyTicket" @click="byBusTicket(item.poi_id,0,item.prod_cate_id,item.category_id)">购买去程车票</div>
                            <div class="buyTicket" @click="byBusTicket(item.poi_id,1,item.prod_cate_id,item.category_id)">购买返程车票</div>
                        </div>
                    </div>
<!--                    <div class="info_div">-->
<!--                        <div class="must_read ub">-->
<!--                            <div @click="change_payable_status"-->
<!--                                 v-bind:class="{'check_img_select':payable_flag,'check_img_noselect':!payable_flag}"-->
<!--                                 class="check_img  ub check_click" data-checked="1"-->
<!--                                 style="margin-right:5px;"></div>-->
<!--                            <div class="info ub ub-f1 check_click">-->
<!--                                为支持绿色环保，我同意默认电子合同的有效性，无需再次签署纸质合同。-->
<!--                                点击立即支付表示已阅读并同意-->
<!--                                <span @click="show_rule" class="see_rule" style="color:#368ff4">  一日游合同和退改规则  </span>。-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>

                <div class="go_create_order max-width">
                    <div class="ub" style="width:100%;">
                        <div @click="lookPriceDetail" class="create_left ub ub-f2  ub-ac"
                             style="background: white;opacity: 1;padding-left:0.15rem;">
                            <div class="arrow" style="width:0.12rem;height:0.07rem"
                                 :style="showPrice?'background: url(static/image/bus_order/down_arrow.png) 0% 0% / 100% 100% no-repeat;':'background: url(static/image/bus_order/up_arrow.png) 0% 0% / 100% 100% no-repeat;'" ></div>
                        <span class="ulev1"
                              style="margin-left:0.21rem;height: 0.1225rem;font-family: PingFangSC;font-size: 0.13rem;text-align: left;color: #666666;">总价：<span
                            class="ulev1" style="font-size: 0.13rem;font-weight: normal;color:#f45a36;">￥</span></span>
                            <span id="total_money" class="ulev1 total_money_style">{{total_money}}</span>
                        </div>
                        <div @click="pay_now" v-if="payable_flag" id="btn_create_order"
                             class="create_right ub ub-f1 ub-pc ub-ac">
                            <span
                                style="height: 0.15rem;font-family: PingFangSC;font-size: 0.16rem;text-align: left;color: #ffffff;">立即支付</span>
                        </div>

                        <div v-else id="btn_create_forbidden" class="create_forbidden ub ub-f1 ub-pc ub-ac">
                            <span
                                style="height: 0.15rem;font-family: PingFangSC;font-size: 0.16rem;text-align: left;color: #ffffff;">立即支付</span>
                        </div>
                    </div>
                </div>
            </div>

            <!--总价详情模态框-->
            <div class="model_price divide" v-show="showPrice" @click="closePriceDetail">
                <div v-if="category_id ==3" class="model_box_price animated" :class="fadeFlag?'fadeInUp':'fadeInDown'">
                    <div class="ub ub-pe ub-ac" style="height:0.45rem;">
                        <!--padding: 0 0.15rem 0 0.15rem;-->
                        <div class="ub ub-f1 ub-ac box_title"
                             style="margin:0.105rem 0 0.07rem 0.12rem;width: 0.56rem;height: 0.2rem;font-family: PingFangSC;font-size: 0.14rem;">
                            总价详情
                        </div>
                        <div class="ub ub-ac"
                             style="font-family: PingFangSC;font-size:0.12rem;height:0.165rem;margin-right:0.12rem;color:#818181;">
                            {{day_cnt}}晚，{{room_cnt}}间
                        </div>
                    </div>
                    <div class="desc ub ub-ver " style="margin-bottom:0.165rem;max-height:3.66rem;overflow-y: scroll;-webkit-overflow-scrolling: touch;">

                        <div v-for="(val,index) in date_arr" class="ub ticket_price_desc ">
                            <div class="ub ub-f1 desc_name"
                                 style="font-family: PingFangSC;color: #96969c; margin-left:0.12rem;">
                                <div class="ub" style="width:0.5rem;color: #96969c;">{{val.date}}</div>
                                <div class="ub" style="color: #818181;;" v-show="index!=0">{{breakfast}}</div>
                            </div>
                            <div v-show="(index+1)!=date_arr.length" class="ub"
                                 style="font-family: PingFangSC;font-size:0.12rem;height:0.165rem;margin-right:0.12rem;color:#818181;">
                                <span class="peopleNum">{{room_cnt}}</span>&nbsp;&nbsp;×&nbsp;&nbsp;¥<span class="unitPrice">{{val.price}}</span>
                            </div>
                        </div>

                    </div>
                </div>

                <div v-else id="" class="model_box_price animated" :class="fadeFlag?'fadeInUp':'fadeInDown'">
                    <div class="ub ub-pe ub-ac" style="height:0.45rem;">
                        <!--padding: 0 0.15rem 0 0.15rem;-->
                        <div class="ub ub-f1 ub-ac box_title"
                             style="margin:0.105rem 0 0.07rem 0.12rem;width: 0.56rem;height: 0.2rem;font-family: PingFangSC;font-size: 0.14rem;">
                            总价详情
                        </div>
                        <div class="ub ub-ac"
                             style="font-family: PingFangSC;font-size:0.12rem;height:0.165rem;margin-right:0.12rem;color:#818181;">
                            {{prod_cnt}}人
                        </div>
                    </div>
                    <div class="desc ub ub-ver " style="margin-bottom:0.165rem;">

                        <div v-for="val in show_order_info" class="ub ticket_price_desc ">
                            <div class="ub ub-f1 desc_name"
                                 style="font-family: PingFangSC;color: #96969c; margin-left:0.12rem;">{{val.prod_name}}&nbsp;&nbsp;&nbsp;&nbsp;
                                <!--<span style="color: #818181;;" >breakfast</span>-->
                            </div>
                            <div  class="ub ub-f1 ub-pe"
                                 style="font-family: PingFangSC;font-size:0.12rem;;height:0.165rem;margin-right:0.12rem;color:#818181;">
                                <span class="peopleNum">{{val.cnt}}&nbsp;×&nbsp;</span><span class="unitPrice ub" style="width:0.45rem">¥&nbsp;{{val.unit_price}}</span>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

            <transition name="fade">
                <div v-show="rule_showable_flag" class="model">
                    <div class="model_box">
                        <div class="ub ub-pe ub-ac" style="height:0.45rem;">
                            <div class="ub ub-f1 ub-ac ub-pc box_title" style="font-size:0.14rem;color:#333">电子合同</div>
                            <div @click="hide_rule" id="box_clear"
                                 style="position:absolute;right:0.16rem;top:0.14rem;width: 0.14rem;height: 0.14rem;background-image: url('static/image/home/clear.png');background-repeat:  no-repeat;background-size: 100% 100%;"></div>
                        </div>
                        <div style="border-bottom:1px solid #e6e6e6;margin-left:0.07rem;margin-right:0.07rem;"></div>
                        <div id="desc"
                             style="position: absolute;bottom:0.21rem;top:0.6rem;;overflow: scroll; padding-left: 0.16rem; padding-right: 0.16rem;">
                            <div>
                                <p style="background-color:#ffffff; border-bottom-color:#d5d5d5; border-bottom-style:solid; border-bottom-width:0.75pt; font-size:10.5pt; line-height:200%; margin:3.75pt 0pt">
                                    <span
                                        style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">退改规则</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">【用户取消】</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">该产品工作日支持取消。如需取消，请联系</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">蜘蛛出行客服人员</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">申请取消。</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">使用日期前1天16:00（含）之前申请取消，不收取损失费；</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">使用日期前1天21:00之后申请取消，收取</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">总</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">金额的10%</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">损失费；</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">；</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">订单不支持部分退。</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">如需改期，请申请取消后重新预订。</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">&nbsp;</span>
                                </p>
                                <p style="background-color:#ffffff; border-bottom-color:#d5d5d5; border-bottom-style:solid; border-bottom-width:0.75pt; font-size:10.5pt; line-height:200%; margin:3.75pt 0pt">
                                    <span
                                        style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">一日游预订须知</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">第一条 特别提示</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt"></span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">蜘蛛行国际旅行社有限公司</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">企业类型：有限责任公司</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">旅行社业务许可证编号：</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">L-SH-01636</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">经营范围：</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">旅行社业务</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">。</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">法定代表人：林</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">加芳</span><br><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">上海市旅游局质量监督所电话：021-64393615</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">在预订开始前，请仔细阅读本须知，本须知及产品页面中的重要条款也作为双方协议的补充内容。当您开始预订旅游度假产品时，已表明您仔细阅读并接受协议的所有条款。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">第二条 旅行社</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">1.除法律另有规定外，旅行社对可能危及旅游者人身、财产安全的旅游项目未履行告知、警示义务，并采取防止危害发生的必要措施，造成旅游者人身损害、财产损失的，应承担</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">相应的赔偿责任。发生危及旅游者人身安全的情形，旅行社未采取必要处置措施的，应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">2.旅行社距约定出发时间12小时（含12小时）以上解除合同的，应向旅游者全额退还预付旅游费用；旅行社距约定出发时间12小时之内解除合同的，还应向旅游者支付旅游费用总额20%的违约金。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">3.旅行社未按合同约定安排具有合法有效资质的旅游车辆、驾驶员或导游员的，应向旅游者全额退还已付旅游费用。如果因此给旅游者造成其他人身、财产损害的，旅行社还应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">4.旅行社在行程中弃置旅游者的，应向旅游者全额退还已付旅游费用，并承担弃置期间给旅游者造成的必要的住宿费、餐饮费、返回交通费等实际损失。如果因此给旅游者造成其他人身、财产损害的，旅行社还应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">5.旅行社违反合同包车游约定安排合车游的，应向旅游者支付旅游费用总额20%的违约金。出发前旅游者要求解除合同的，旅行社还应向旅游者全额退还已付旅游费用。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">6.旅行社及导游员、驾驶员安排旅游者在其指定的购物场所购物或以参观等形式变相安排购物（合同中明示景点含购物场所的除外）的、强迫或者变相强迫旅游者购物的，每安排或强迫一次，旅行社应向旅游者支付旅游费用总额20%的违约金。旅游者要求退货的，旅行社应自旅游者向其交付货物之日起三日内承担退货责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">7.旅行社及导游员、驾驶员安排另行付费项目的，旅行社应向旅游者全额退还另行付费项目价款。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">8.旅行社及导游员、驾驶员擅自缩短游览时间、遗漏旅游景点、减少旅游服务项目的，应退还旅游者相应旅游费用（约定旅游服务项目未完成时间÷总游览时间×旅游费用总额），并支付旅游费用总额20%的违约金。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">9.旅行社出现其他《旅行社服务质量赔偿标准》规定的需承担赔偿责任的情形，依照《旅行社服务质量赔偿标准》承担赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">第三条 旅游者</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">1.旅游者不按约定支付旅游费用的，旅行社有权解除合同，旅游者应向旅行社支付业务损失费（最高不超过旅游费用总额）。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">2.旅游者在距约定出发时间12小时（含12小时）以上解除合同的，旅游者应向旅行社支付实际发生的费用；旅游者在距约定出发时间12小时以内解除合同的，还应向旅行社支付旅游费用总额20%的违约金（实际发生的费用与违约金总计最高不超过旅游费用总额）。旅游者未按约定时间到达约定集合出发地点，也未能在出发中途加入旅游团队的，视为旅游者在距约定出发时间12小时以内解除合同。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">3.旅游者在行程中解除合同或者擅自脱离旅游团队的，旅游者应向旅行社支付实际发生的费用。因此造成旅行社其他经济损失的，旅游者还应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">4.旅游者违反合同约定妨碍旅游行程，给旅行社造成经济损失的，应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">5.旅游者采取拖延行程等不正当方式解决争议，妨碍旅游行程、造成损失扩大的，应就扩大的损失承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">6.旅游者其他过错行为给旅行社造成经济损失的，应承担相应的赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">第四条 不可抗力</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">发生不可抗力等不可归责于合同任何一方的事由，按下述情况处理：</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">1.导致合同无法履行或继续履行的，旅行社和旅游者均有权解除合同。未实际发生费用的，旅行社应向旅游者全额退还已付旅游费用；已实际发生费用的，由旅行社与旅游者协商合理分担，剩余费用退还旅游者。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">2.危及旅游者人身、财产安全的，旅行社应当采取相应的安全措施。因此支出的费用，由旅行社和旅游者协商合理分担。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">3.造成旅游者滞留的，旅行社应当采取相应安置措施。因此增加的食宿费用，由旅游者承担；增加的返回出发地的费用，由旅行社和旅游者协商合理分担。</span>
                                </p>
                                <p style="background-color:#ffffff; border-bottom-color:#e4e4e4; border-bottom-style:solid; border-bottom-width:0.75pt; margin:0pt">
                                    <span
                                        style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">使用说明</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">1.本合同为示范文本，供在中华人民共和国境内的旅行社与旅游者签订国内旅游“一日游”合同时使用。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">2.合同双方可根据具体情况，在协商一致的基础上以书面形式对解除合同的方式、退还旅游费用及支付违约金的期限等本合同示范文本有关条款的内容进行补充、细化，补充、细化的内容不得减轻或者免除应当由旅行社承担的责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">3.本合同示范文本由国家旅游局和国家工商行政管理总局共同制定、解释。</span>
                                </p>
                                <p style="background-color:#ffffff; border-bottom-color:#e4e4e4; border-bottom-style:solid; border-bottom-width:0.75pt; margin:0pt">
                                    <span
                                        style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt; font-weight:bold">补 充 条 款</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">1. 由于第三方（例如，航空公司、保险公司、及其他有权机构等）等不可归责于旅行社的原因导致旅游者人身、财产权益受到损害的，包括但不限于，航班延误或取消等，应由旅游者自行协商解决，旅行社除在力所能及的范围内予以协助外，不再承担其他责任，如给旅行社造成损失的，旅行社保留一切追偿权。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">2. 不可抗力是指不能预见、不能避免并不能克服的客观情况。不可抗力等不可归责于旅行社的客观原因包括但不限于，恶劣天气、自然灾害、战争、罢工、骚乱、恐怖事件、政府行为、公共卫生事件等客观原因，造成旅游行程安排的交通服务延误、景区临时关闭、宾馆饭店临时被征用、出境管制、边境关闭、目的地入境政策临时变更、我国政府机构发布橙色及以上旅游预警信息等，均会导致旅游目的无法实现，旅行社不承担违约责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">3. 因不可抗力或者旅行社、履行辅助人已尽合理注意义务仍不能避免的事件，影响一日游行程的，双方达成变更意思一致的，因此增加的费用由旅游者承担，减少的费用退还旅游者；双方未能达成变更意思一致的，均可解除合同，旅行社应扣除已向地接社或履行辅助人支付且不可退还的费用后，将余款退还旅游者；旅行社采取安全措施保护旅游者人身、财产安全而支出的费用，旅游者应承担比例不少于50%；造成旅游者滞留当地而增加的食宿费用，由旅游者承担，增加的返程费用，旅游者应承担比例不少于50%。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">4. 旅游者参加高原地区旅游或风险旅游项目（包括但不限于：游泳、浮潜、冲浪、漂流等水上活动以及骑马、攀岩、登山等高风险的活动）或患有不宜出行旅游的病情（包括但 不限于：恶性肿瘤、心血管病、高血压、呼吸系统疾病、癫痫、怀孕、精神疾病、身体残疾、糖尿病、传染性疾病、慢性疾病健康受损），须在报名前自行前往医疗机构体检后，确保自身身体条件能够完成本次旅游活动，并向旅行社提供体检报告副本；旅游者须保证提供的身体健康状况真实，如隐瞒由本人承担全部责任；旅游者系18周岁以下（含18岁）参加旅游，应至少有一位18周岁以上人员陪同出行；旅游者系 70岁以上（含70岁）参加旅游，应有亲属同意，且非单人出行，同时在出行前如实填写并提交《身体健康申报表》；旅行社已经给予旅游者出游安全提示（旅行社已经提示并劝阻，但如旅游者仍坚持参加旅游活动，由此造成任何人身意外及不良后果将由旅游者本人全部承担）。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">5. 旅游者在旅游期间和自行安排活动期间应严加注意人身及财产安全。旅游者因自身原因或第三方原因导致的人身、财产损失由旅游者自行承担；由此给旅行社造成损失的，旅游者应当承担赔偿责任。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">6. 为了更全面的保障旅游者的人身安全，旅行社建议游客出游时根据个人意愿和需要自行投保个人险种。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">7. 旅游者务必带好所需物品，准时到达指定地点集合。如迟到半小时以上视为自动放弃行程。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">8. 旅游者擅自分团、脱团的，旅行社有权反馈至相关行政机构。旅游者不得要求旅行社退还任何费用。如旅行社因此遭受损失的，旅行社有权向旅游者追偿。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">9. 旅游者经与旅行社协商一致的，可暂时离团，但应与旅行社签署书面协议，旅行社应扣除已向地接社或履行辅助人支付且不可退还的费用后，将余款退还旅游者。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">10. 若旅游行程内含有购物店，旅游者有权选择是否参加，如旅游者不愿参加，可选择预订其他旅游产品线路，或届时直接向导游或领队提出，由旅行社和旅游者另行协商安排。旅游行程中的自由活动期间内，旅行社将会视旅游者需求及实际情况推荐部分自费项目，如旅游者自愿参加，应与旅行社另行签署书面协议，并不得影响同团其他客人在此期间的活动安排。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">11.争议解决方式：本合同履行过程中发生争议，由双方协商解决，亦可在旅游合同结束之日90天内向旅游质监机构申请调</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">解，也可向消费者协会等有关部门或者机构申请调解，也可提请上海</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">闵行</span><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">区法院诉讼。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">12. 一日游产品确认单及产品预订须知中所述作为合同附件，是本合同的有效组成部分,与本合同具有同等法律效力。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">13．由于一日游产品的多样性及特殊性，如在产品页面预订须知中披露的退改规则或者合同解除条款与本协议内容不一致的，以产品预订须知中相关内容为准。</span>
                                </p>
                                <p style="background-color:#ffffff; margin:0pt"><span
                                    style="color:#333333; font-family:'Microsoft YaHei'; font-size:10.5pt">14. 本协议已对与旅游者权益有或可能有重大关系的条款用粗体字标注提示旅游者注意，请旅游者仔细阅读。一经旅游者确认，则视为您实际使用本服务前，您已充分阅读理解并接受本合同的全部内容。</span>
                                </p>
                                <p style="margin:0pt; orphans:0; text-align:justify; widows:0"><span
                                    style="font-family:Calibri; font-size:12pt">&nbsp;</span></p></div>
                        </div>

                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import {getPayDate, checkOrderStatus, payCheckOrder} from '../../service/httpService'
    import tool from '../../config/mUtil/tool'
    import dateUtil from '../../config/mUtil/dateUtil'
    import cardId from '../../config/mUtil/cardId'
    import info from '../../config/info'
    import {Toast, Swipe, SwipeItem, Switch, MessageBox} from 'mint-ui';

    export default {
        name: "order_pay",
        data() {
            return {
                order_id: this.$route.query.order_id,
                data: [],
                order_info: [],
                show_order_info:[],
                prod_info: [],
                total_money: 0,
                payable_flag: true,
                guoqi_flag: false,
                rule_showable_flag: false,
                contact_name: '',
                contact_phone: '',
                category_id: 0,
                order_make_time: '2018-01-17 14:04:20',
                current_time: dateUtil.getDateTime(),
                pay_sec: 0,
                rest_time: '00:00',
                showPrice: false,
                fadeFlag: false,
                start_date:'',
                end_date:'',
                day_cnt:0,
                date_arr:[],
                room_cnt:0,
                breakfast:'',
                timer:null,
                prod_arr:[],
                prod_cnt:0,
                insurance_cnt:0,

            }
        },
        mounted() {
            this.$nextTick(() => {
                this.baseData(true);
            })
        },
        methods: {
            baseData(time) {
                let order_id = this.order_id;
                getPayDate({order_id: order_id}).then(res => {
                    if (res['flag'] == false && res['url'] === '') {
                        MessageBox('提示', res['msg']);
                    } else if (res['flag'] == false && res['url']) {
                        window.location.href = res['url']
                    } else {
                        this.data = res['data'];
                        this.order_info = this.data['payParam']['orderInfo'];
                        if(this.data['payParam'].hasOwnProperty('show_order_info')){
                            this.show_order_info = res['data']['payParam']['show_order_info'];
                        }
                        this.total_money = this.order_info['total_money'];
                        this.contact_name = this.order_info['contacts_name'];
                        this.contact_phone = this.order_info['contacts_phone'];
                        this.prod_info = this.order_info['prod_info'];
                        this.category_id = this.prod_info[0]['category_id'];
                        this.pay_sec = this.order_info['pay_time'];
                        this.start_dec_time();
                        if(this.category_id==3){
                            this.start_date = this.prod_info[0]['start_date'];
                            this.end_date = this.prod_info[0]['end_date'];
                            this.day_cnt=this.prod_info[0]['day_cnt'];
                            this.room_cnt = this.prod_info[0]['prod_cnt'];
                            this.breakfast = this.prod_info[0]['breakfast'];
                            this.date_arr = this.prod_info[0]['total_details'];
                            this.date_arr.push({
                                date:this.end_date,
                                price:''
                            });
                            for (let i = 0; i < this.date_arr.length; i++) {
                                this.date_arr[i].date = dateUtil.getMonthByDate(this.date_arr[i].date) + '-' + dateUtil.getDayByDate(this.date_arr[i].date);
                                let price = parseInt(this.date_arr[i].price);
                                if (this.date_arr[i].price - price === 0) {
                                    this.date_arr[i].price = price;
                                }
                            }
                        }else{
                            this.prod_arr = this.prod_info[0]['prod_array'];
                            this.prod_cnt = this.prod_info[0]['prod_cnt'];
                            this.insurance_cnt = this.prod_info[0]['insurance_cnt'];

                        }

                    }

                }).catch(e => {
                    Toast(info.infoApiError);
                })
            },
            checkOrder(order_id, total_money) {
                checkOrderStatus({order_id: order_id, money: total_money}).then(res => {
                    if (res['flag'] === false && res['url'] === "") {
                        MessageBox('提示', res['msg']);
                    } else if (res['flag'] === false && res['url']) {
                        window.location.replace(res['url'])
                    } else {
                        let data = res['data'];
                        if (data['is_pay'] === 1) {
                            //跳转支付成功页面
                            tool.$router.replace(this,{
                                name:'order_success',
                                query:{
                                    order_id: order_id
                                }
                            });
                        } else {
                            if (data['is_change_price'] === 1) {
                                Toast('价格已变更');
                                this.baseData();
                            } else {
                                tool.delay(() => {
                                    this.checkOrder(order_id, total_money);
                                }, 2000);
                            }
                        }
                    }
                }).catch(e => {
                    Toast(info.infoApiError);
                })
            },

            change_payable_status() {
                if (this.guoqi_flag) {
                    this.payable_flag = false;
                } else {
                    this.payable_flag = !this.payable_flag;
                }

            },
            show_rule() {
                this.rule_showable_flag = true;
            },
            hide_rule() {
                this.rule_showable_flag = false;
            },
            start_dec_time() {
                this.rest_time = dateUtil.stringTimeTommss(this.pay_sec);
                if (this.rest_time !== '00:00') {
                    this.checkOrder(this.order_id, this.total_money);
                } else {
                    Toast('该订单已过期');
                    this.payable_flag = false;
                    this.guoqi_flag = true;
                }
                clearInterval(this.timer);
                this.timer = null;
                this.timer=tool.timer({
                    toDo: (obj) => {
                        this.pay_sec--;
                        this.rest_time = dateUtil.stringTimeTommss(this.pay_sec);
                        if (this.rest_time === '00:00') {
                            this.payable_flag = false;
                            obj.clear();
                        }
                    }
                })
            },
            lookPriceDetail() {
                this.fadeFlag = !this.fadeFlag;
                if (this.showPrice === false) {
                    this.showPrice = !this.showPrice;
                } else {
                    setTimeout(() => {
                        this.showPrice = !this.showPrice;
                    }, 400)
                }
            },

            closePriceDetail() {
                this.fadeFlag = false;
                setTimeout(() => {
                    this.showPrice = false;
                }, 400)
            },

            pay_now() {
                if (this.category_id === '3') {  //酒店订单
                    payCheckOrder({
                        order_id: this.order_id
                    }).then(res => {
                        if (res.flag === false) {

                        } else {
                            if (this.data.payType === 1) this.wechat_pay();  //微信环境
                            if (this.data.payType === 2) this.ali_pay();     //支付宝环境
                            if (this.data.payType === 3) this.ali_pay();  //浏览器环境
                        }
                    }).catch(e => {
                        Toast(info.infoApiError);
                    });


                } else {
                    if (this.payable_flag) {
                        if (this.data.payType === 1) this.wechat_pay();  //微信环境
                        if (this.data.payType === 2) this.ali_pay();     //支付宝环境
                        if (this.data.payType === 3) this.ali_pay();  //浏览器环境
                    }
                }
            },

            /*--------------------以下微信支付宝支付相关函数------------------*/
            ali_pay() {
                let payParam = this.data['payParam'];
                document.getElementById('alipaysubmit').submit();
            },
            wechat_pay() {
                this.call(this.data['payParam']['wx_info']);
            },
            call(pay_data) {
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall(pay_data), false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall(pay_data));
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall(pay_data));
                    }
                } else {
                    this.jsApiCall(pay_data);
                }
            },
            //调用微信JS api 支付
            jsApiCall(pay_data) {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    pay_data,
                    res=> {
                        WeixinJSBridge.log(res.err_msg);
                        //		alert(JSON.stringify(res));
                        // alert(res.err_msg);
                        if (res.err_msg == 'get_brand_wcpay_request:ok') {
                            Toast('支付成功');
//                            tool.delay(() => {
//                                tool.$router.push(this, {
//                                    name: 'order_success',
//                                    query: {
//                                        order_id: this.order_id
//                                    }
//                                })
//                            }, 1000);
                        } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                            Toast('支付取消');
                        } else {
                            Toast('支付失败');
                        }
                    }
                );
            },
            byBusTicket(poi_id,is_back,prod_cate_id,category_id){
              tool.$router.replace(this,{
                name:'scenic_spot',
                query:{
                  poi_id:poi_id,
                  order_id: this.order_id,
                  is_back: is_back,
                  recom_category:category_id,
                  recom_prod_cate:prod_cate_id
                }
              });
            }


        }
    }
</script>

<style scoped lang="scss" type="text/scss">
    @import "./../../style/mixin";
    @import "../../../static/css/ui-base.css";
    @import "../../../static/css/ui-box.css";
    @import "../../../static/css/ui-color.css";


    @keyframes fadeInUp {
        0% {
            /*opacity: 0;*/
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        100% {
            /*opacity: 1;*/
            -webkit-transform: none;
            transform: none;
        }
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    @-webkit-keyframes fadeInDown {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        100% {
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInDown {
        0% {
            -webkit-transform: none;
            transform: none;
        }
        100% {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }


    .buyTicket {
        width: 50%;
        padding-bottom: 0.06rem;
        padding-top: 0.06rem;
        color: #fff;
        margin-right: 0.05rem;
        margin-left: 0.05rem;
        text-align: center;
        font-size: 14px;
        background-color: #368ff4;
    }

    .model_price {
        position: fixed;
        z-index: 24;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .model_box_price {
        position: fixed;
        bottom: 0.4rem;
        left: 0;
        right: 0;
        background-color: #fff;
    }

    .animated {
        -webkit-animation-duration: 0.4s;
        animation-duration: 0.4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .peopleNum, .unitPrice {
        font-family: PingFangSC;
        font-size: 0.12rem;
        height: 0.165rem;
        color: #818181;
    }

    .roomBottom {
        background-color: #ECECEC;
        width: 100%;
    }

    .roomRight {
        margin-left: 2rem;
    }

    .roomBorder {
        width: 0.63rem;
        height: 0.29rem;
        border-radius: 0.145rem;
        background-color: #ffffff;
        margin-top: 0.085rem;
        margin-bottom: 0.08rem;
        margin-right: 0.07rem;
        font-family: PingFangSC;
        font-size: 0.12rem;
        float: left;
    }

    .roomBorder:nth-of-type(5n+1) {
        margin-left: 0.12rem;
    }

    .roomBorder:nth-of-type(n+6) {
        margin-top: 0;
    }

    .chooseRoomNum {
        color: #368ff4;
        border: solid 2px #368ff4;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .9s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .top_black {
        width: 3.75rem;
        height: 0.64rem;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .timer {
        width: 3.75rem;
        height: 0.95rem;
        background-color: $colorMain;
    }

    .hotel_info {
        width: 3.75rem;
        background-color: $colorWhite;
    }

    .attention {
        color: $colorWhite;
        width: 3rem;
        height: 0.2rem;
        opacity: 0.8;
        font-family: PingFangSC;
        font-size: 0.14rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
    }

    .left_time {
        color: $colorWhite;
        width: 1.2rem;
        height: 0.28rem;
        font-family: PingFangSC;
        font-size: 0.2rem;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
    }

    .stop_watch {
        width: 0.43rem;
        height: 0.225rem;
        font-family: PingFangSC;
        font-size: 0.16rem;
        font-weight: 500;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: $colorWhite;
    }

    .hotel_name {
        width: 3rem;
        height: 0.2rem;
        font-family: PingFangSC;
        font-size: 0.14rem;
        font-weight: 550;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
    }

    .hotel_left {
        height: 0.165rem;
        font-size: 0.12rem;
        color: $colorGray4;
    }

    .go:first-child {
        background: white;
        font-weight: normal;
    }

    .go {
        background: white;
        margin-top: 0.06rem;
    }

    .info_div {
        margin-top: 12px;
        padding: 0 0.08rem;
    }

    .fix {
        position: fixed;
    }

    .one {
        padding-top: 0.07rem;
        padding-bottom: 0.07rem;
        border-bottom: 1px solid #e9ebee;
    }

    .one_noborder:first-child {
        padding-top: 0.15rem;
    }

    .one_noborder {
        padding-top: 0.07rem;
        padding-bottom: 0.07rem;
    }

    .left {
        padding-left: 0.12rem;
        margin-left: 0.12rem;
    }

    .right {
        padding-left: 0.05rem;
        font-size: 0.14rem;
        color: #686872;
        padding-right: 0.16rem;
    }

    .right_txt {
        padding-left: 0.2rem;
        font-size: 0.14rem;
        color: #686872;
        padding-right: 0.16rem;
    }

    .arrow_down {
        background: url(../../../static/image/bus_order/down_arrow.png);
        width: 0.12rem;
        height: 0.07rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .arrow_up {
        background: url(../../../static/image/bus_order/up_arrow.png);
        width: 0.12rem;
        height: 0.07rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .pay_now {
        /*position: fixed;
        left: 0.08rem;
        right: 0.08rem;
        bottom: 0.16rem;*/
        margin-top: 0.2rem;
        border-radius: 100px;
        height: 0.4rem;
        line-height: 1.0;
        background-color: #2d2e3a;
        color: #FFFFFF;
    }

    .total_money_style {
        height: 0.1475rem;
        font-family: PingFangSC;
        font-size: 0.2rem;
        font-weight: 500;
        line-height: 0.9;
        text-align: left;
        color: #f45a36;
    }

    .go_create_order {
        position: fixed;
        bottom: 0;
        width: 100%;
        box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);
        z-index: 100;
    }

    .create_left {
        width: 1%;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .create_right {
        /*color: #fff;*/
        /*font-size: 0.18rem;*/
        /*width: 1%;*/
        /*background: #2d2e3a;*/
        /*padding-top: 0.1rem;*/
        /*padding-bottom: 0.1rem;*/
        opacity: 0.9;
        background-color: #368ff4;
    }

    .create_forbidden {
        /*color: #fff;*/
        /*font-size: 0.18rem;*/
        /*width: 1%;*/
        /*background: #2d2e3a;*/
        /*padding-top: 0.1rem;*/
        /*padding-bottom: 0.1rem;*/
        opacity: 0.9;
        background-color: #999;
    }

    .gift-item {
        color: $colorGray4;
    }

    .gift-item:not(:first-child) {
        margin-top: 0.05rem;
    }

    .check_img_select {
        background: url('');
        -webkit-background-size: 13px 13px;
        background-size: 13px 13px;
        width: 13px;
        height: 13px;
        background-repeat: no-repeat;
    }

    .check_img_noselect {
        background: url('');
        -webkit-background-size: 13px 13px;
        background-size: 13px 13px;
        background-repeat: no-repeat;
        width: 13px;
        height: 13px;
    }

    .model {
        position: absolute;;
        z-index: 100;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /*-webkit-filter: blur(6px);
filter: blur(6px);*/
        background-color: rgba(0, 0, 0, 0.4);
    }

    .model_box {
        position: fixed;
        top: 0.23rem;
        bottom: 0.23rem;
        left: 0.2rem;
        right: 0.2rem;
        border-radius: 0.05rem;
        background-color: #fff;
        /*-webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;*/
    }
</style>
